<template>
	<div class="systemConfig" :style="{width:initWidth}">
		<div class="right_header" :style='{"background":this.$store.getters.theme[5]}'>
			<div class="listName" :style='{"color":this.$store.getters.theme[6]}'> <i class="icon iconfont">&#xe7d8;</i>
				当前位置/系统配置/
				<span>系统配置</span>
			</div>
		</div>
		<div class="right_content">
			<div class="form">
				<div class="divider2"></div>
				<el-form :model="ruleForm" ref="ruleForm" :rules="rules" class="demo-form-inline" :inline="true">
					<div class="import">
						<el-form-item label="游戏名称：" :label-width="formLabelWidth">
							<el-select
							  v-model="region" @change='projectsChange'
							  placeholder="请选择游戏" type="success">
								<el-option
							    v-for="item in projects"
						        :label="item.label"
						        :value="item.value"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="枚举名：" :label-width="formLabelWidth">
							<el-input v-model="ruleForm.enumName"></el-input>
						</el-form-item>
						<el-form-item label="枚举值："  :label-width="formLabelWidth">
							<el-input v-model="ruleForm.enumValue"></el-input>
						</el-form-item>
						<el-form-item label="枚举描述：" :label-width="formLabelWidth">
							<el-input v-model="ruleForm.description"></el-input>
						</el-form-item>
					</div>
					<el-form-item class="conmit">
						<el-button type="primary" @click="submitForm('ruleForm')" icon="plus">立即添加</el-button>
						<el-button type="primary" @click="findForm()" icon="search">立即搜索</el-button>
						<el-button @click="resetForm('ruleForm')">重置</el-button>
						<br>
						<span class="warning">（添加枚举ID请留空！输入搜索条件，留空搜索全部！）</span>
					</el-form-item>
				</el-form>
				<div class="divider2"></div>
			</div>
			<div class="table">
				<el-table
			:data="tableData"
			border :default-sort = "{prop: 'id', order: 'ascending'}"
			style="width: 100%"  >
					<el-table-column align="center" sortable
					  label="游戏名称">
						<template scope="scope">
							<div slot="reference" class="name-wrapper">
								<el-tag>{{ scope.row.gameName }}</el-tag>
							</div>
						</template>
					</el-table-column>
					<el-table-column align="center"
					  label="枚举ID" sortable  prop="id"
					  width="100"></el-table-column>
					<el-table-column align="center"
					  label="枚举名" prop="enumName"></el-table-column>
					<el-table-column align="center" prop="enumValue"
					  label="枚举值"></el-table-column>
					<el-table-column align="center" prop="description"
					  label="枚举描述"></el-table-column>
					<el-table-column label="操作" align="center" width="300">
						<template scope="scope">
							<el-button type="primary"
					      size="small"
					      @click="edit(scope.$index, scope.row)">修改</el-button>
						</template>
					</el-table-column>
				</el-table>
				<div class="block realTimeServicePage">
					<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="currentPage"
					:page-sizes="pageSizes"
					:page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="dataTotal"></el-pagination>
				</div>
			</div>
		</div>
		<div class="revampForm" v-show="revampShow">
			<div class="revampChoose">
				<div class="vicp-close"  @click="revampShow=false"> <i class="el-icon-close vicp-icon4"></i>
				</div>
				<el-form :model="revampForm" :rules="revampRules" ref="revampForm" label-width="115px" class="demo-ruleForm">
					<h5>修改枚举</h5>
					<el-form-item label="游戏名称：" prop="region">
						<el-select
						  v-model="revampRegion"
						  placeholder="请选择游戏" type="success" disabled>
							<el-option
							    v-for="item in projects"
						        :label="item.label"
						        :value="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="枚举名：">
						<el-input v-model="revampForm.enumName" disabled></el-input>
					</el-form-item>
					<el-form-item label="枚举值：">
						<el-input v-model="revampForm.enumValue"></el-input>
					</el-form-item>
					<el-form-item label="枚举描述：">
						<el-input v-model="revampForm.description"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="revamp('revampForm')">立即修改</el-button>
						<el-button @click="revampReset('revampForm')">重置</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>
	</div>
</template>
<style lang="stylus" rel="stylesheet/stylus" src="./systemConfig.styl"></style>
<script src="./systemConfig.js"></script>